<!--
 * @Author       : 刘洋 liuy5335@163.com
 * @Date         : 2025-01-25 10:58:34
 * @LastEditors  : 刘洋 liuy5335@163.com
 * @LastEditTime : 2025-03-20 10:15:21
 * @FilePath     : \zhly-vform\src\components\form-designer\setting-panel\property-editor\formula-editor.vue
 * @Description  : 介绍文件的作用
 * 
 * Copyright (c) 2025 by zhlx - liuy5335@163.com, All Rights Reserved. 
-->
<template>
  <div>
    <el-form-item v-if="optionModel.formulaEnabled" :label="i18nt('designer.setting.formula')" label-position="top">
      <el-input :model-value="formulaEchoValue" type="textarea" :rows="3" resize="none" placeholder="点击设置内容" readonly
                @click="handleOpenFormulaEditor" />
    </el-form-item>

    <el-dialog class="small-padding-dialog" v-model="formulaDialogVisible" :title="i18nt('designer.hint.formulaSetting')" width="70%"
               draggable :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :append-to-body="false"
               @closed="handleFormulaEditorClosed">
      <div class="formula-editor-wrapper">
        <!-- <el-radio-group v-model="formulaState.formulaType" @change="handleChangeFormulaType">
          <el-radio value="simple">普通设置</el-radio>
          <el-radio value="advanced">高级设置</el-radio>
        </el-radio-group> -->

        <advanced-expression-editor v-if="isAdvancedFormula" ref="advancedExpressionEditorRef" style="height: 500px;"
                                    v-model="formulaState.formulaValue" :designer="designer" :ignoredFields="expressionIgnoredFields" />
        <expression-editor v-else ref="simpleExpressionEditorRef" style="height: 500px;" v-model="formulaState.formulaValue"
                           :designer="designer" :ignoredFields="expressionIgnoredFields" simple />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="default" type="primary" @click="handleFormulaEditorOk">{{ i18nt("designer.hint.confirm") }}</el-button>
          <el-button size="default" @click="handleFormulaEditorCancel">{{ i18nt("designer.hint.cancel") }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import i18n from "@/utils/i18n";
  import ExpressionEditor from "@/components/expression-editor/index.vue";
  import AdvancedExpressionEditor from "@/components/expression-editor/advanced.vue";

export default {
  name: "formula-editor",
  mixins: [ i18n ],
  components: { ExpressionEditor, AdvancedExpressionEditor },
  props: {
    designer: { type: Object, default: () => ({}) },
    selectedWidget: { type: Object, default: () => ({}) },
    optionModel: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      formulaState: {
        formulaType: "",
        formulaValue: "",
      },
      formulaDialogVisible: false,
    };
  },
  computed: {
    isAdvancedFormula() {
      return this.formulaState.formulaType === "advanced";
    },
    expressionIgnoredFields() {
      const { aliasName, name } = this.selectedWidget?.options || {};
      return (aliasName || name) ? [(aliasName || name)] : [];
    },
    formulaEchoValue() {
      const { formulaType, formulaValue = "" } = this.optionModel || {};
      if (formulaType === "advanced") {
        return formulaValue && Array.isArray(formulaValue) ? JSON.stringify(formulaValue) : formulaValue;
      } else {
        return formulaValue;
      }
    }
  },
  watch: {
    optionModel: {
      deep: true,
      immediate: true,
      handler(value) {
        if (value) {
          const { formulaType, formulaValue } = value;
          this.formulaState = {
            formulaType: formulaType || "simple",
            formulaValue
          };
        }
      }
    }
  },
  methods: {
    handleOpenFormulaEditor() {
      this.formulaDialogVisible = true;
      !this.isAdvancedFormula && this.$nextTick(() => {
        this.$refs.simpleExpressionEditorRef?.init();
      });
    },

    handleChangeFormulaType() {
      if (this.isAdvancedFormula) {
        this.$nextTick(() => {
          this.$refs.advancedExpressionEditorRef?.resetExpressionItems();
        });
      } else {
        this.formulaState.formulaValue = "";
        this.$nextTick(() => {
          this.$refs.simpleExpressionEditorRef?.init();
        });
      }
    },

    handleFormulaEditorOk() {
      this.optionModel.formulaType = this.formulaState.formulaType;
      this.optionModel.formulaValue = this.formulaState.formulaValue;
      this.formulaDialogVisible = false;
    },

    handleFormulaEditorCancel() {
      this.formulaDialogVisible = false;
    },

    handleFormulaEditorClosed() {
      const { formulaType, formulaValue } = this.optionModel || {};
      this.formulaState = {
        formulaType: formulaType || "simple",
        formulaValue
      };
    },
  },
};
</script>

<style lang="scss" scoped>
  :deep(.cm-editor) {
    height: 100%;
  }
</style>
